<template>
	<div class="alertTable">
		<div class="header">
			<div class="header-line">&nbsp;</div>
			<div class="header-name">告警列表</div>
		</div>
		<div class="table">
			<el-table
				:data="tableData"
				:header-cell-style="{
					textAlign: 'center',
					color: '#fff',
					background: '#132054'
				}"
				:cell-style="{ textAlign: 'center' }"
				height="100%"
			>
				<el-table-column type="index" label="序号" width="48"></el-table-column>
				<el-table-column prop="bjxm" label="报警项目" show-overflow-tooltip></el-table-column>
				<el-table-column prop="bjdx" label="报警对象" show-overflow-tooltip></el-table-column>
				<el-table-column prop="bjsj" label="报警时间" show-overflow-tooltip></el-table-column>
				<el-table-column prop="zip" label="操作" width="50">
					<template slot-scope="scope">
						<div class="imgContainer">
							<img src="../../assets/tubiao.png" />
						</div>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<el-pagination v-show="total>10" layout="total, prev, pager, next" :total="total" small></el-pagination>
	</div>
</template>
<script>
export default {
	name: 'alertTable',
	data() {
		return {
			total:2,
			tableData: [
				{
					bjxm: '测试报警项目01',
					bjdx: '测试报警对象01',
					bjsj: '2019-09-09 12:12:12'
				},
				{
					bjxm: '测试报警项目02',
					bjdx: '测试报警对象02',
					bjsj: '2019-09-09 12:12:12'
				},{
					bjxm: '测试报警项目03',
					bjdx: '测试报警对象03',
					bjsj: '2019-09-09 12:12:12'
				},{
					bjxm: '测试报警项目04',
					bjdx: '测试报警对象04',
					bjsj: '2019-09-09 12:12:12'
				},{
					bjxm: '测试报警项目05',
					bjdx: '测试报警对象05',
					bjsj: '2019-09-09 12:12:12'
				},{
					bjxm: '测试报警项目06',
					bjdx: '测试报警对象06',
					bjsj: '2019-09-09 12:12:12'
				},
		
			]
		};
	}
};
</script>
<style lang="scss" scoped>
.alertTable {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	// overflow: hidden;
	.header {
		display: flex;
		.header-line {
			width: 3px;
			color: #226dc4;
			background-color: #226dc4;
		}
		.header-name {
			font-weight: bold;
			margin-left: 5px;
			background: linear-gradient(to right, #226dc4, #132054);
			font-size: 14px;
			line-height: 30px;
			padding: 0 10px;
			width: 300px;
			height: 30px;
		}
	}
	.table {
		width: 100%;
		flex: 1;
		overflow: hidden;
	}
}
.imgContainer {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	img {
		width: 15px;
		height: 15px;
	}
}
::v-deep .el-table th.el-table__cell {
	background-color: #132054 !important;
}
::v-deep .el-pagination {
	text-align: right;
}
::v-deep .el-pagination button:disabled,
::v-deep .el-pagination .btn-next,
::v-deep .el-pagination .btn-prev,
::v-deep .el-pager li,
::v-deep .el-pagination__total {
	background-color: #132054 !important;
	color: #ffffff;
}
::v-deep .el-pager li.active {
	background-color: #ffffff !important;
}
</style>
